var dataset = [
	{num: "1001", name: "张三", gender: "女", password: "1234", age: "29", dob: "1991-1-1"},
	{num: "1002", name: "李四", gender: "男", password: "1234", age: "28", dob: "1992-2-2"},
	{num: "1003", name: "王五", gender: "女", password: "1234", age: "27", dob: "1993-3-3"},
	{num: "1002", name: "赵六", gender: "女", password: "1234", age: "26", dob: "1994-4-4"}
]

renderTable(dataset);

$("#btn-delete").click(function() {
	let records = $(".record");
	let itemSelected = false;
	for (let i = 0; i < records.length; i++) {
		const record = $(records[i]);
		// console.log(record.html());
		// console.log($(record).find("input:first").html())
		if ($(record).find("input:first").is(":checked")) {
			itemSelected = true;
			let temp =$(record).children("td:gt(0)");
			let num = $(temp[0]).text();
			let name = $(temp[1]).text();
			let gender = $(temp[2]).text();
			let password = $(temp[3]).text();
			let age = $(temp[4]).text();
			let dob = $(temp[5]).text();
			removeRecord({num, name, gender, password, age, dob});
		}
	}
	if (!itemSelected) {
		const markup = `
			<div class="alert alert-danger alert-dismissible fade show" role="alert">
			  <strong>No record selected!</strong>
			  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
			</div>
		`;
		$("body").append(markup);
	}
});

$("#btn-edit").click(function() {
	let records = $(".record");
	let itemSelected = false;
	for (let i = 0; i < records.length; i++) {
		const record = $(records[i])
		if ($(record).find("input:first").is(":checked")) {
			itemSelected = true;
			let temp =$(record).children("td:gt(0)");

			let num = $(temp[0]).text();
			let name = $(temp[1]).text();
			let gender = $(temp[2]).text();
			let password = $(temp[3]).text();
			let age = $(temp[4]).text();
			let dob = $(temp[5]).text();

			$("#edit-modal-num").val(num);
			$("#edit-modal-name").val(name);
			$("#edit-modal-gender").val(gender);
			$("#edit-modal-password").val(password);
			$("#edit-modal-age").val(age);
			$("#edit-modal-dob").val(dob);

			$("#btn-edit-modal-confirm").click(function() {
				let newNum = $("#edit-modal-num").val();
				let newName = $("#edit-modal-name").val();
				let newGender = $("#edit-modal-gender").val();
				let newPassword = $("#edit-modal-password").val();
				let newAge = $("#edit-modal-age").val();
				let newDob = $("#edit-modal-dob").val();

				updateRecord(i, {
					num: newNum,
					name: newName,
					gender: newGender,
					password: newPassword,
					age: newAge,
					dob: newDob
				});

				$("#edit-modal").modal("hide");
			});

			$("#edit-modal").modal("show");
			console.log("bb")
		}
	}
	if (!itemSelected) {
		const markup = `
			<div class="alert alert-danger alert-dismissible fade show" role="alert">
			  <strong>No record selected!</strong>
			  <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
			</div>
		`;
		$("body").append(markup);
	}
});


$("#btn-search").click(function() {
	let searchName = $("#search-by-name").val();
	let searchNum = $("#search-by-num").val();
	if (searchName.length > 0 && searchNum.length > 0) {
		renderTable(dataset.filter(elem => elem.name === searchName && elem.num === searchNum));
	}
	else if (searchName.length > 0) {
		renderTable(dataset.filter(elem => elem.name === searchName));
	}
	else if (searchNum.length > 0) {
		renderTable(dataset.filter(elem => elem.num === searchNum));
	}
	else {
		renderTable(dataset);
	}
});


$("#btn-add-modal-confirm").click(function() {
	let num = $("#add-modal-num").val();
	let name = $("#add-modal-name").val();
	let gender = $("#add-modal-gender").val();
	let password = $("#add-modal-password").val();
	let age = $("#add-modal-age").val();
	let dob = $("#add-modal-dob").val();

	addRecord(num, name, gender, password, age, dob);
	renderTable(dataset);

	$("#add-modal-num").val("");
	$("#add-modal-name").val("");
	$("#add-modal-gender").val("");
	$("#add-modal-password").val("");
	$("#add-modal-age").val("");
	$("#add-modal-dob").val("");

	$("#add-modal").modal("hide");
});


// helper functions ------------------------------------------------------------

function renderTable(dataset) {
	$("tr:gt(0)").remove();
	for (let i = 0; i < dataset.length; i++) {
		let lastRow = $("tr:last");
		const data = dataset[i];
		let markup = `
		<tr class="record">
			<td><input type="checkbox" name="record"></td>
			<td>${data.num}</td>
			<td>${data.name}</td>
			<td>${data.gender}</td>
			<td>${data.password}</td>
			<td>${data.age}</td>
			<td>${data.dob}</td>
		</tr>
		`;
		lastRow.after(markup);
	}
	$("tr:even :gt(6)").css("background", "lightblue");
	$("tr:odd").css("background", "lightyellow");
}

function addRecord(num, name, gender, password, age, dob) {
	dataset.push({
		num, name, gender, password, age, dob
	});
}

function removeRecord(record) {
	dataset = dataset.filter(elem => {
		return elem.num !== record.num ||
				elem.name !== record.name ||
				elem.gender != record.gender ||
				elem.password !== record.password ||
				elem.age != record.age ||
				elem.dob !== record.dob;
	});
	renderTable(dataset);
}

function updateRecord(index, record) {
	dataset[index].num = record.num;
	dataset[index].name = record.name;
	dataset[index].gender = record.gender;
	dataset[index].password = record.password;
	dataset[index].age = record.age;
	dataset[index].dob = record.dob;
	renderTable(dataset);
}
